<script setup>
import { ref, onMounted, watch, computed } from 'vue';
import { getUserActivities } from '../../api/activity';

const props = defineProps({
  userId: {
    type: String,
    required: true
  },
  dateRange: {
    type: Object,
    default: () => ({})
  }
});

const loading = ref(true);
const activities = ref([]);

// 获取数据
const fetchData = async () => {
  loading.value = true;
  try {
    const params = {
      startDate: props.dateRange.startDate,
      endDate: props.dateRange.endDate
    };
    
    const response = await getUserActivities(props.userId, params);
    activities.value = response.data;
  } catch (error) {
    console.error('获取数据失败', error);
  } finally {
    loading.value = false;
  }
};

// 计算总运动次数
const totalActivities = computed(() => activities.value.length);

// 计算总距离
const totalDistance = computed(() => {
  const sum = activities.value.reduce((acc, activity) => acc + activity.distance, 0);
  return sum.toFixed(1);
});

// 计算总时长(小时)
const totalDuration = computed(() => {
  const minutes = activities.value.reduce((acc, activity) => acc + activity.duration, 0) / 60;
  return (minutes / 60).toFixed(1);
});

// 计算总卡路里
const totalCalorie = computed(() => {
  return activities.value.reduce((acc, activity) => acc + activity.calorie, 0);
});

// 计算平均心率
const avgHeartRate = computed(() => {
  const activitiesWithHeartRate = activities.value.filter(activity => activity.heart_rate);
  if (activitiesWithHeartRate.length === 0) return 0;
  
  const sum = activitiesWithHeartRate.reduce((acc, activity) => acc + activity.heart_rate, 0);
  return Math.round(sum / activitiesWithHeartRate.length);
});

// 计算总步数
const totalSteps = computed(() => {
  return activities.value.reduce((acc, activity) => acc + (activity.steps || 0), 0);
});

// 计算运动类型分布
const activityTypes = computed(() => {
  const types = {};
  activities.value.forEach(activity => {
    if (!types[activity.type]) {
      types[activity.type] = 0;
    }
    types[activity.type] += 1;
  });
  
  // 转换为数组并排序
  return Object.entries(types)
    .map(([name, count]) => ({ name, count }))
    .sort((a, b) => b.count - a.count);
});

// 监听属性变化时重新获取数据
watch(() => props.dateRange, () => {
  fetchData();
}, { deep: true });

watch(() => props.userId, () => {
  fetchData();
});

// 组件挂载时获取数据
onMounted(() => {
  fetchData();
});
</script>

<template>
  <div class="stats-container">
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="activities.length === 0" class="no-data">暂无数据</div>
    <div v-else class="stats-grid">
      <div class="stats-card">
        <div class="card-value">{{ totalActivities }}</div>
        <div class="card-label">运动次数</div>
        <div class="card-icon">
          <i class="iconfont icon-record"></i>
        </div>
      </div>
      
      <div class="stats-card">
        <div class="card-value">{{ totalDistance }}</div>
        <div class="card-label">总距离 (km)</div>
        <div class="card-icon">
          <i class="iconfont icon-distance"></i>
        </div>
      </div>
      
      <div class="stats-card">
        <div class="card-value">{{ totalDuration }}</div>
        <div class="card-label">总时长 (小时)</div>
        <div class="card-icon">
          <i class="iconfont icon-time"></i>
        </div>
      </div>
      
      <div class="stats-card">
        <div class="card-value">{{ totalCalorie }}</div>
        <div class="card-label">总消耗 (kcal)</div>
        <div class="card-icon">
          <i class="iconfont icon-fire"></i>
        </div>
      </div>
      
      <div class="stats-card">
        <div class="card-value">{{ avgHeartRate }}</div>
        <div class="card-label">平均心率 (bpm)</div>
        <div class="card-icon">
          <i class="iconfont icon-heart"></i>
        </div>
      </div>
      
      <div class="stats-card">
        <div class="card-value">{{ totalSteps }}</div>
        <div class="card-label">总步数</div>
        <div class="card-icon">
          <i class="iconfont icon-footprint"></i>
        </div>
      </div>
    </div>
    
    <div class="activity-types" v-if="!loading && activities.length > 0">
      <h3>运动类型分布</h3>
      <div class="type-list">
        <div v-for="type in activityTypes" :key="type.name" class="type-item">
          <span class="type-name">{{ type.name }}</span>
          <span class="type-count">{{ type.count }}次</span>
          <div class="type-bar">
            <div class="type-bar-inner" :style="{ width: `${type.count / totalActivities * 100}%` }"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.stats-container {
  width: 100%;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.stats-card {
  background: white;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.card-value {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.card-label {
  font-size: 14px;
  color: #666;
}

.card-icon {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1ac963;
  opacity: 0.2;
  font-size: 30px;
}

.activity-types {
  background: white;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-top: 20px;
}

.activity-types h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
}

.type-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.type-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.type-name {
  width: 80px;
  font-size: 14px;
  color: #333;
}

.type-count {
  width: 60px;
  font-size: 14px;
  color: #666;
  text-align: right;
  padding-right: 10px;
}

.type-bar {
  flex: 1;
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.type-bar-inner {
  height: 100%;
  background-color: #1ac963;
  border-radius: 4px;
}

.loading, .no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #999;
  font-size: 14px;
}

/* 模拟图标字体 */
.iconfont {
  font-style: normal;
}
.icon-record:after { content: "🏃"; }
.icon-distance:after { content: "📊"; }
.icon-time:after { content: "⏱️"; }
.icon-fire:after { content: "🔥"; }
.icon-heart:after { content: "❤️"; }
.icon-footprint:after { content: "👣"; }
</style> 